<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>空调遥控器模拟</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    .remote {
      background: #333;
      padding: 20px;
      border-radius: 15px;
      width: 300px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

    .display {
      background: #a0d8ef;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      margin-bottom: 20px;
    }

    .temp-display {
      font-size: 48px;
      font-weight: bold;
      color: #333;
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    button {
      padding: 15px;
      border: none;
      border-radius: 10px;
      background: #666;
      color: white;
      font-size: 18px;
      cursor: pointer;
      transition: 0.3s;
    }

    button:hover {
      background: #888;
    }

    .power-btn {
      background: #ff4444;
    }

    .power-btn.on {
      background: #00c851;
    }

    .mode-btn.active {
      background: #007bff;
    }

    .fan-btn.active {
      background: #ff8800;
    }
  </style>
</head>
<body>
<div class="remote">
  <div class="display">
    <div class="temp-display">25℃</div>
    <div class="status">制冷模式</div>
  </div>

  <div class="controls">
    <button class="temp-btn" onclick="changeTemp(1)">+</button>
    <button class="power-btn" onclick="togglePower()">电源</button>
    <button class="temp-btn" onclick="changeTemp(-1)">-</button>

    <button class="mode-btn" onclick="setMode('cool')">制冷</button>
    <button class="mode-btn" onclick="setMode('heat')">制热</button>
    <button class="mode-btn" onclick="setMode('dry')">除湿</button>

    <button class="fan-btn" onclick="setFanSpeed(1)">低速</button>
    <button class="fan-btn" onclick="setFanSpeed(2)">中速</button>
    <button class="fan-btn" onclick="setFanSpeed(3)">高速</button>
  </div>
</div>

<script>
  let isPowerOn = false;
  let currentTemp = 25;
  let currentMode = 'cool';
  let currentFanSpeed = 1;

  function updateDisplay() {
    const tempDisplay = document.querySelector('.temp-display');
    const statusDisplay = document.querySelector('.status');
    const powerBtn = document.querySelector('.power-btn');

    tempDisplay.textContent = `${currentTemp}℃`;
    tempDisplay.style.color = isPowerOn ? '#333' : '#666';
    statusDisplay.textContent = isPowerOn ? `${getModeName(currentMode)}模式` : "已关机";
    powerBtn.classList.toggle('on', isPowerOn);
  }

  function togglePower() {
    isPowerOn = !isPowerOn;
    updateDisplay();
  }

  function changeTemp(amount) {
    if (!isPowerOn) return;
    currentTemp = Math.min(30, Math.max(16, currentTemp + amount));
    updateDisplay();
  }

  function setMode(mode) {
    if (!isPowerOn) return;
    currentMode = mode;
    document.querySelectorAll('.mode-btn').forEach(btn =>
      btn.classList.remove('active'));
    event.target.classList.add('active');
    updateDisplay();
  }

  function setFanSpeed(speed) {
    if (!isPowerOn) return;
    currentFanSpeed = speed;
    document.querySelectorAll('.fan-btn').forEach(btn =>
      btn.classList.remove('active'));
    event.target.classList.add('active');
  }

  function getModeName(mode) {
    const modes = {
      cool: '制冷',
      heat: '制热',
      dry: '除湿'
    };
    return modes[mode];
  }
</script>
</body>
</html>
